<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String basepath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath() + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>创业网--创业辅导</title>
<style type="text/css">
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div
{	margin:0;
	padding:0;
}
div{
	box-sizing:border-box; 
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.clearfix:before,.clearfix:after{ 
    content:""; 
    display:table; 
} 
.clearfix:after{clear:both;} 
.clearfix{ 
 *zoom:1;/*IE/7/6*/
}
.top{
	width: 875px;
	height: 70px;
	margin: 0 auto;
}
.top>a>img{
	width: 325px;
}
.top>div{
	margin-top: 15px;
	float: right;
}
.top>div>p{
	margin-top: 15px;
	font-size: 14px;
}
.top>div>p>a{
	text-decoration: none;
}
.top>div>p>a:hover{
	color: #90c624;
}
.body_top{
	padding-top: 20px;
	width: 100%;
	height: 100px;
	background-color: #f0f0f0;
}
.body_top>div{
	width: 870px;
	height: 85px;
	margin:0 auto;
	padding-top:10px; 
}
.body_top>div>p{
	font-family:"微软雅黑";
	color: #90c624;
	font-size:40px;
	font-weight:900;
	display: inline-block;
}
.body_top>div>span{
	font-size: 14px;
	color: #8f8f8f;
	float: right;
	margin-top: 20px;
}
.body_top>div>a>img{
	float: right;
	margin: 17px 5px;
}
.body_top>div>div{
	display: inline-block;
}
.body_top>div>div>p{
	font-weight:500;
	letter-spacing: 2px;
	font-size: 18px;
	color: #8f8f8f;
}
.body_top>div>div>.last_p{
	color: #90c624;
	font-size: 12px;
	letter-spacing: 0px;

}
.body_wrap{
	width: 100%;
	background: #f7f7f7;
	padding-top: 50px;
}
.body_wrap .middle{
	width: 870px;
	height: 630px;
	margin: 0 auto;
}
.body_wrap .middle .left{
	float: left;
	height: 630px;
}
.body_wrap .left_top{
	width: 180px;
	height: 120px;
	color: #96c720;
	font-size: 20px;
	text-align: center;
}
.body_wrap .left_top .last_p{
	font-size:30px;
	font-weight: bolder;
	line-height:65px;
}
.body_wrap .left_botton{
	width: 180px;
	height: 70px;
	font-size: 15px;
	color: #6d6d6d;
	background-color: #f0f0f0; 
}
.body_wrap .left_botton>p{
	padding:10px 35px;
	cursor: pointer;
}
.body_wrap 	.p_click{
	background: #fff;
	border-left: 3px solid #96c720;
}
.body_wrap .left_botton>p:hover{
	background: #fff;
	border-left: 3px solid #96c720;
}
.body_wrap .right{
	float: left;
	height: 430px;
	border-left: 2px solid #96c720;
	margin-left: 50px;
	padding-left:50px;
	color: #969798;
}
.body_wrap .right .notice{
	background: url(img/notice.png) no-repeat;
	padding-left: 40px;
	line-height: 20px;
}
.body_wrap .right>p{
	line-height: 60px;
}
.body_wrap .right>p>b{
	display:inline-block;
	text-align: right;
	width: 70px;
}
.body_wrap .right>p>input{
	width: 360px;
	height: 30px;
	margin-left: 20px;
}
.right2,.right3{
	display: none;
}
.right>div.right_bottom{
	margin-top: 20px;
	width: 360px;
	padding-left: 90px;
}
.right>div.right_bottom>.yz_data{
	width: 110px;
	height: 25px;
	float: left;	
}
.right>div.right_bottom>div{
	margin-left: 20px;
	float: left;
}
.right>div.right_bottom>input.submit{
	width: 80px;
	height: 30px;
	color: #fff;
	background-color: #96c720;
	border: 1px solid #ccc;
	border-radius:5px;
	margin-top: 50px;
}
#checkEmail,#checkPass,#checkCode,#secPass{
	color: red;
	width:auto;
	font-size: 12px;
  	margin-left: 5px;
}
</style>
</head>
<body>
<div class="top" id="top">
		<a href="index"><img src="img/logo.png" alt="重庆邮电大学" /></a>
		<div>
			<p>欢迎您注册本网站！|<a href="index">返回首页</a>|</p>
		</div>	
</div>
	<div class="body_top">
		<div>
			<p>注册</p>
		    <div>
			    <p>REGISTER</p>
			    <p class="last_p">GET CLOSER TO THE DREAM</p>
		    </div>
		    <a href="index"><img src="img/weizhi.png"></a>
		    <span>当前位置：<span>首页</span>><span>注册</span></span>
		</div>
	</div>
	<div class="body_wrap">
		<div class="middle">
			<div class="left">
				<div class="left_top">
					<p>DIFFERENT TYPES</p>
					<p class="last_p">注册分类</p>
				</div>
				<div class="left_botton">
					<p class="left_botton1" onclick="chuanzhi(1);">创业导师</p>
					<p class="left_botton2" onclick="chuanzhi(2);">创业团队</p>
				</div>
			</div>
			<div>
			<form action="register_info" method="post" onsubmit="">
				<div class="right">
					<p class="notice">请先选择注册类型</p>
					<input type="text" id="titletype" name="type" value="" style="display: none;"/>	
					<p><b>昵称</b><input type="text" name="name"/></p>
					<p><b>帐号</b><input id="valimail" name="loname" placeholder="请输入邮箱" type="text"/><b id="checkEmail"></b></p>
					<p><b>密码</b><input type="password" placeholder="数字、字母组成，大于6位数" id="firstword" name="password"/><b id="checkPass"></b></p>
					<p><b>确认密码</b><input id="secword" type="password" placeholder="请再次输入"/><b id="secPass"></b></p>
					<div class="right_bottom clearfix">
						<input type="text" name="code" id="codeCheck" class="yz_data"/> <div><img src="safecode" alt="验证码" id="regCode" onclick="changeImg()"/> <b id="checkCode"></b></div>
						<input type="submit" value="注册" class="submit"/>
					</div>
				</div>
			</form>
			</div>	
		</div>
	</div>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
	$(".left_botton1").click(function(){
		$(this).attr('class', 'p_click');
		$(this).siblings().attr('class', '');
		$(".body_wrap .right input").attr("disabled",false)
	});
	$(".left_botton2").click(function(){
		$(this).attr('class', 'p_click');
		$(this).siblings().attr('class', '');
		$(".body_wrap .right input").attr("disabled",false)
	});
	$(".right input").attr("disabled","true");
	function changeImg(){
		$("#regCode").attr("src","safecode?d="+new Date().valueOf());
	}
	//用户名验证
	function user_check(){
		$("#valimail").blur(function(){
		var mail = $("#valimail").val();
		if(mail=="")
			{
   				$("#checkEmail").html("不能为空哦！")
   				return false;
  			}
  		else if(!mail.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/))
 		 	{
   				$("#checkEmail").html("格式错了哦！")
  		 		return false;
  			}else{
					$.ajax({
					type: "post",
					url: "ajax/nameIsOk",
					data: {name : mail},
					dataType: "text",
					success:function(data){
						if (data) {
							$("#checkEmail").html("邮箱可用！")
						}else{
							$("#checkEmail").html("已注册哦")
						};
					}
				}); 
			}
		});
		$("#firstword").blur(function(){
			var pass = $("#firstword").val();
			if(pass.length<6){
				$("#checkPass").html("密码应不小于6位！")
   				return false;
			}
			 if(!pass.match(/^[0-9a-zA-Z]*$/g))
 		 	{
   				$("#checkPass").html("请输入字母＋数字！");
   				$("#firstword").focus();
  		 		return false;
  			}else{
  				$("#checkPass").html("")
  			}
			});
		$("#secword").blur(function(){
			var pass = $("#firstword").val();
			var sec  = $("#secword").val();
			if(pass!=sec){
				$("#secPass").html("两次密码不同！")
   				return false;
			}else{
				$("#secPass").html("");
			}
		});
		$("#codeCheck").blur(function(){
		var code = $("#codeCheck").val();
			$.ajax({
				type: "post",
				url: "ajax/codeCheck",
				data: {name : code},
				dataType: "text",
				success:function(data){
					if (!data) {
						$('#checkCode').html("验证码错误")
					};
				}
			}); 
		});
	}
	user_check();
	function chuanzhi(d){
		$("#titletype").value=d;
	};
</script>	
</body>
</html>